<template>
  <div class="hmdgl">
    <a-search :change="paginationElement?.change" :list="list" v-model="form"></a-search>
    <a-card resize>
      <a-card>
        <el-button @click="handleInfo(null, true)">新增</el-button>
      </a-card>
      <a-table :data="data" :head="head">
        <template #handle="{ row }">
          <el-link @click="handleInfo(row, true)">编辑</el-link>
          <el-link type="primary" @click="handleInfo(row, false)">查看</el-link>
          <a-link type="danger" :confirm="() => handleDelete(row)">删除</a-link>
        </template>
      </a-table>
      <a-pagination ref="paginationElement" :total="total" :change="getTableData"></a-pagination>
      <a-dialog :title="title" v-model="show" :footer="edit" :confirm="handleConfirm">
        <a-form ref="formElement" :list="rowList" v-model="rowForm" :inline="true" :disabled="!edit"></a-form>
      </a-dialog>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { tableData, save, add, deleteData } from '../api/jkkfgl'
import { ElMessage } from 'element-plus'

interface HMDGL {
  id: string
  [key: string]: unknown
}

const paginationElement = ref<APaginationInstance | null>()
const formElement = ref<AFormInstance | null>(null)

const TYPE = [
  { label: 'get', value: 'get' },
  { label: 'post', value: 'post' },
  { label: 'delete', value: 'delete' }
]

const form = ref({})
const list = ref<FormItem[]>([
  { prop: 'interfaceName', 'aria-label': '接口名称', type: 'input' },
  { prop: 'interfaceMethod', 'aria-label': '请求方式', type: 'select', data: TYPE }
])

const data = ref<HMDGL[]>([])
const head = ref([
  { prop: 'interfaceCallNumber', label: '调用次数' },
  { prop: 'interfaceDescription', label: '接口描述' },
  { prop: 'interfaceMethod', label: '请求方式' },
  { prop: 'interfaceName', label: '接口名称' },
  { prop: 'interfaceParameter', label: '请求参数' },
  { prop: 'interfaceResponse', label: '返回参数' },
  { prop: 'interfaceURL', label: '接口地址' },
  { prop: 'handle', label: '操作', fixed: 'right' }
])
const total = ref(0)

function getTableData(page: number, row: number) {
  tableData<HMDGL>({
    page,
    row,
    ...form.value
  }).then(({ data: result }) => {
    data.value = result.pageList
    total.value = result.totals
  })
}

const rowForm = ref<HMDGL>({} as HMDGL)
const rowList = ref<FormItem[]>([
  { prop: 'interfaceCallNumber', 'aria-label': '调用次数', type: 'input', rules: [{ required: true, message: '请输入调用次数', trigger: 'blur' }] },
  { prop: 'interfaceDescription', 'aria-label': '接口描述', type: 'input', rules: [{ required: true, message: '请输入接口描述', trigger: 'blur' }] },
  { prop: 'interfaceMethod', 'aria-label': '请求方式', type: 'select', data: TYPE, rules: [{ required: true, message: '请选择请求方式', trigger: 'change' }] },
  { prop: 'interfaceName', 'aria-label': '接口名称', type: 'input', rules: [{ required: true, message: '请输入接口名称', trigger: 'blur' }] },
  { prop: 'interfaceParameter', 'aria-label': '请求参数', type: 'input', rules: [{ required: true, message: '请输入请求参数', trigger: 'blur' }] },
  { prop: 'interfaceResponse', 'aria-label': '返回参数', type: 'input', rules: [{ required: true, message: '请输入返回参数', trigger: 'blur' }] },
  { prop: 'interfaceURL', 'aria-label': '接口地址', type: 'input', rules: [{ required: true, message: '请输入接口地址', trigger: 'blur' }] }
])

const show = ref(false)
const title = ref('')
const edit = ref(false)

function handleInfo(row: HMDGL | null, e: boolean) {
  rowForm.value = { ...row } as HMDGL
  edit.value = e
  show.value = true
  title.value = e ? '编辑' : '查看'
}

function handleConfirm() {
  formElement.value?.element.validate((valid: boolean) => {
    if (valid) {
      const fn = rowForm.value.id ? save : add
      fn({
        ...rowForm.value
      }).then(({ msg }) => {
        show.value = false
        paginationElement.value?.change()
        ElMessage.success(msg)
      })
    }
  })
}

function handleDelete(row: HMDGL) {
  deleteData(row.id).then(({ msg }) => {
    ElMessage.success(msg)
    paginationElement.value?.change()
  })
}
</script>
